<template>
    <div class="footer-cp my_box_shadow">
        除了博客外内容均来自网上，如有问题请联系站长及时删除。QQ：2978968560<br>
        <a href="http://www.beian.miit.gov.cn/" target="_blank">蜀ICP备19040930号</a>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010702001708">
            川公网安备 51010702001708号
        </a>
        &nbsp;&nbsp;&nbsp;始于2019年12月的这次旅行，还未曾看到终点！
    </div>
</template>
<script>
export default {
    name:"Footer",
    data(){ 
        return{
            visits:0,
            friendlylinkList:[
                {"id":1,"name":"站搜搜","url":"https://www.zhansousou.com/"},
                {"id":2,"name":"小度鱼","url":"https://www.xiaoduyu.com/"},
                {"id":3,"name":"独立开发者","url":"https://indiehackers.net/"},
                {"id":4,"name":"媚韵","url":"http://meiyun2333.top/"},
                {"id":5,"name":"什么值得读","url":"http://www.shenmezhidedu.com/"},
                {"id":11,"name":"学渣新媒体导航","url":"https://www.xuezha.cn/"},
                {"id":12,"name":"黑点导航","url":"https://www.ihddh.com/"},
                {"id":13,"name":"燕十三","url":"https://www.yanshisan.cn/"}
            ],
            moreList:[
                {
                    name:"站长微博",
                    href:"https://weibo.com/7438796191/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1",
                },
                {
                    name:"分享|投稿",
                    href:"https://support.qq.com/product/144938",
                },
                {
                    name:"吐槽|留言",
                    href:"https://support.qq.com/products/118119",
                },
                {
                    name:"数据管理",
                    href:"https://www.dumogu.top/admin/",
                },
                {
                    name:"GitHub",
                    href:"https://github.com/wurencaideli/dujitang",
                },
            ],
            childList:[
                {
                    name:"毒蘑菇配色",
                    href:"https://color.dumogu.top/",
                },
                {
                    name:"毒蘑菇搜索",
                    href:"https://search.dumogu.top/",
                },
                {
                    name:"数据管理",
                    href:"https://www.dumogu.top/admin",
                },
            ],
        }
    },
    methods:{
        addVisits(){  //添加一个访问量
            this.$axios.$Api.addVisits()  //获取访问数据
                .then((data)=>{	
                    this.visits = data;
                });
        },
        getFriendlyLinks(){  //获取友情链接
            this.$axios.$Api.getFriendlyLinks()  //获取访问数据
                .then((data)=>{	
                    this.friendlylinkList = data;
                });
        },
    },
    created(){
        if (!process.client) return;
        this.addVisits();
        this.getFriendlyLinks();
    },
}
</script>
<style lang="scss" scoped>
.footer-cp{
    width: 100%;
    height: fit-content;
    background-color: #ffffff;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    >.container{
        margin: 0 auto;
        max-width: 940px;
        width: 100%;
        display: grid;
        grid-template-columns: 4fr 1fr;
        grid-gap: 15px;
        opacity: 0.6;
        transition: all 0.2s;
        &:hover{
            opacity: 1;
        }
        //栏目公共样式
        .column{
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 10px;
            >.title{
                line-height: 1;
                font-size: 16px;
                font-weight: bold;
            }
            >.container{
                display: flex;
                flex-direction: row;
                justify-content:flex-start;
                align-items: center;
                flex-wrap: wrap;
                >.item{
                    font-size: 14px;
                    margin: 5px 10px 5px 0;
                    line-height: 1;
                }
            }
            >.content{
                opacity: 0.8;
                font-size: 14px;
                line-height: 2;
                span{
                    font-weight: bold;
                    font-size: 15px;
                }
            }
        }
        >.left{
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 15px;
            height: fit-content;
        }
        >.right{
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 15px;
            height: fit-content;
        }
    }
}

@media only screen and (max-width: 750px) {
    .footer-cp{
        display: none;
    }
}
</style>